let _default = {
    compressUnit: 0.4,//压缩系数
    returnType: "base64",//返回的图片格式，
    compressWay: "fit",//压缩方式，默认fit等比压缩
    imgOrigin: null,//需要压缩的源图像,
    imgElement: null,
    originSrc: "",
    maxWidth: 1000,//canvas进行绘制时最大的宽度
    maxHeight: 1000,
    maxSize: 0,//大于这个尺寸就进行图片压缩
    success: null,
}
function checkUrlType(url) {
    let reg = /^data.*$/;
    // let flag = reg.test(url);
    // reg.lastIndex = 0;
    // return flag;
    return reg.test(url);
}
function createId() {
    //[0, 1}
    return parseInt(Math.random() * 100000); //[0, 99999]
}
function SGCompress(opt) {
    // console.log(opt);
    if (!opt) {
        return;
    }
    if (opt.originSrc && checkUrlType(opt.originSrc)) {
        return;
    }
    if (opt.img && checkUrlType(opt.img.src)) {
        return;
    }
    this._opt = Object.assign({}, _default, opt);
    this.imgOrigin = null;
    this.imageBitmap = null;
    this.canvas = null;//canvas
    this.context = null;//canvas绘制上下文
    this.drawWidth;//绘制的宽度
    this.drawHeight;//绘制的高度
    this.id = createId();
    // this.initContainer();
    // this.initParams();
    this.initTempImg();
}

//初始化压缩图片所需的相关dom
SGCompress.prototype.initContainer = function () {
    // if (document.querySelector("#sg-compress-box")) {
    //     return document.querySelector("#sg-compress-box");
    // }
    let box = `

        <div id="sg-box-${this.id}" style="width:500px;height:0px;overflow:hidden;">
            <canvas id="sg-canvas-${this.id}"></canvas>
            <img id="sg-temp-${this.id}" />
        </div>
    `;
    document.body.insertAdjacentHTML("beforeend", box);
    return document.querySelector(`#sg-box-${this.id}`);
}

//初始化图片容器
SGCompress.prototype.initTempImg = function () {
    this.imgOrigin = this.initContainer().querySelector(`#sg-temp-${this.id}`);
    // this.imgOrigin.getAttribute("src") && this.imgOrigin.removeAttribute("src");
    this.imgOrigin.setAttribute('crossOrigin', 'anonymous');
    this.imgOrigin.onload = () => {
        console.log("图片容器加载完毕");
        //初始化参数
        this.initParams();
        this.compress();
    } 
    this.imgOrigin.src = this._opt.originSrc;
    // let img = new Image();
    // img.onload = () => {
    //     console.log("图片容器加载完毕");
    //     createImageBitmap(img, 0, 0, 200, 200).then((res) => {
    //         this.imgOrigin = res;
    //         console.log("this.imgOrigin", this.imgOrigin);
    //         this.initParams();
    //         this.compress();
    //     });
    // }
    // img.src = this._opt.originSrc;
    // this.initContainer().insertAdjacentElement("beforeend", this.imgOrigin);
}

//初始化压缩所需的相关参数
SGCompress.prototype.initParams = function () {
    // if (!this.context || !this.canvas) {
        this.canvas = this.initContainer().querySelector(`#sg-canvas-${this.id}`);
        this.context = this.canvas.getContext("2d");
    // }
    //计算canvas按何种宽和高进行绘制
    // let w = this.imgOrigin.offsetWidth;
    // let h = this.imgOrigin.offsetHeight;
    let w = this.imgOrigin.width;
    let h = this.imgOrigin.height;
    // let w = this._opt.img.offsetWidth;
    // let h = this._opt.img.offsetHeight;
    //判断图片的高和宽是否大于了设置的宽和高，如果大于就按照等比缩放
    if (h > this._opt.maxHeight || w > this._opt.maxWidth) {
        if (w > h) {
            // maxWidth/? = w/h
            h = parseInt(this._opt.maxWidth * h / w);
            w = this._opt.maxWidth;
        } else {
            // ?/maxHeight = w/h
            w = parseInt(this._opt.maxHeight * w / h);
            h = this._opt.maxHeight;
        }
    }
    this.drawWidth = w;
    this.drawHeight = h;
    this.canvas.width = this.drawWidth;
    this.canvas.height = this.drawHeight;
    
}

SGCompress.prototype.compress = function () {
    // console.log(this.context);
    if (!this.context) {
        return;
    }
    this.context.drawImage(this.imgOrigin, 0, 0, this.drawWidth, this.drawHeight);
    // this.context.drawImage(this._opt.img, 0, 0, this.drawWidth, this.drawHeight);
    let data = this.canvas.toDataURL("image/png", this._opt.compressUnit);
    this._opt.success && this._opt.success(data);
    // console.log(data);
    this.clear();
    return data;
}

SGCompress.prototype.clear = function (w, h) {
    console.log("清空操作");
    //如果没有传参数，默认清空画布
    if (!w || !h) {
        // w = this.getCanvas().width;
        // h = this.getCanvas().height;
        w = this.drawWidth;
        h = this.drawHeight;
    }
    //清空画布
    this.context.clearRect(0, 0, w, h);
    //清空暂存的图片
    this.imgOrigin = null;
    document.body.removeChild(document.querySelector(`#sg-box-${this.id}`));
}

export default SGCompress;